<template>
	<view>
		<!-- 轮播图 -->
		<swiper :autoplay="true" :interval="3000" :duration="1000" style="height: 450px; margin-top: -40px;">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<view class="swiper-item">
					<image :src="item.carousel_img" mode="" class="swiper-img"></image>
				</view>
			</swiper-item>
		</swiper>


		<view class="goods-info">
			<view class="goods-title">{{goodsList.name}}</view>
			<view class="goods-content-inner">
				<p class="price">
					<span class="us">￥</span>
					<span class="price_new">{{goodsList.price}}</span>
					<span class="price_old">
						<del>￥{{goodsList.price_old}}</del>
					</span>
					<span></span>
				</p>
				<p>

				</p>

			</view>
		</view>
		<!-- 商品参数区域 -->
		<view class="goods-img-list">
			<view class="goods-img" v-for="(item,i) in goodsinfoimg" :key="i">
				<img :src="item.carousel_img" class="goods-img-item" />
			</view>
		</view>



<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" dot />
  <van-goods-action-icon icon="cart-o" text="购物车" :info="this.selectedcount" @tap="toCart" />
  <van-goods-action-icon icon="shop-o" text="店铺" />
  <van-goods-action-button text="加入购物车" type="warning" @click="addToCart" />
</van-goods-action>


	<transition >
<view class="share-container" v-show="showShare">

		<view class="share-wrap">
			<view class="share-icon-wrap">
				<image src="/static/pic/share/Wx.png" @tap="wxshareHandler"></image>
				<image src="/static/pic/share/WxFriend.png" @tap="wxfriendHandler"></image>
				<image src="/static/pic/share/QQ.png"></image>
				<image src="/static/pic/share/Weibo.png"></image>
			</view>
			<button class="cancel-btn" @tap="closeShare">取消</button>
		</view>
</view>
	</transition>
<!-- <share v-show="showShare" @close-share="closeShare" 
			@wx-share="wxShareHandler"
			@wxfriend-share="wxfriendHandler"></share> -->

		
	</view>
</template>

<script>
	import share from "@/components/share.vue"
	import { mapMutations,mapGetters } from "vuex";

	export default {
		data() {
			return {
				id: 0,
				url: "http://localhost:8080/#/pages/home/product?id=",
				swiperList: [],
				goodsList: [],
				selectedCount: 1, //用户选择的默认购买数量
				goodsinfoimg: [],
				showShare:false
			}
		},
		components: {
		share
		},
		computed:{
			    ...mapGetters("cart", ["selectedcount"])
		},
		methods: {
			
			  ...mapMutations('cart',["addToCar","selectedcount"]),
			//获取轮播图
			getCarousel() {
				uni.request({
					url: this.$apiServer+"api/goods/carousel/",
					data: {
						id: this.id,
					},
					success: (res) => {
						this.swiperList = res.data.message;
					}
				})
			},

			//获取产品信息
			getProduct() {
				uni.request({
					url: this.$apiServer+"api/goods/info/",
					data: {
						id: this.id,
					},
					success: (res) => {
						this.goodsList = res.data.message[0];
						console.log(this.goodsList)
						
						uni.setNavigationBarTitle({
						          title:this.goodsList.name
						      })
							  
					}
				})
			},
			// getSelectedCount(c) {
			// 	// 获取选择的商品的数量
			// 	// console.log("父组件传递过来的值"+c)
			// 	// 把用户选择的最新的数量值，保存到data中
			// 	this.selectedCount = c;
			// },
			
			//获取详情
			getGoodsInfoImg() {
				uni.request({
					url: this.$apiServer+"api/goods/img/",
					data: {
						id: this.id,
					},
					success: (res) => {
						this.goodsinfoimg = res.data.message;
					}
				})
			},
			toCart(){
				console.log("ok")
			uni.switchTab({
				animationType: 'slide-in-left',
				animationDuration: 300,
				url: "../../pages/cart/cart"
			})

			},
			
			closeShare(){
				this.showShare=false;
			},
			
    addToCart() {
      //点击加入购物车
      // this.flag = !this.flag;

      //调用mutations中的 addTocat
      // this.$store.commit("addToCar",{
      //     id:this.id,
      //     count:this.selectedCount
      // })
      //直接调用mapMutations中映射出来的方法
	
	  
      this.addToCar({id:this.id,count:this.selectedCount,selected:true,price:this.goodsList.price,img:this.goodsList.img,name:this.goodsList.name});
    uni.showToast({
    	title:"成功加入购物车!",
    
    })
	
	},

wxfriendHandler(){
	uni.share({
	    provider: "weixin",
	    scene: "WXSenceTimeline",
	    type: 0,
	   href: this.url,
	   title: this.goodsList.name,
	   summary:`${this.goodsList.brief}\n优惠价:${this.goodsList.price}`,
	   imageUrl: this.goodsList.img,
	    success: function (res) {
	        console.log("success:" + JSON.stringify(res));
	    },
	    fail: function (err) {
	        console.log("fail:" + JSON.stringify(err));
	    }
	});
},
	wxshareHandler(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.url,
					title: this.goodsList.name,
					summary:`${this.goodsList.brief}\n优惠价:${this.goodsList.price}`,
					imageUrl: this.goodsList.img,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},



		},
		onLoad(id) {
			this.id = id.id;
			console.log(this.id)

			this.url += id.id;
			console.log(this.url)

			this.getCarousel()
			this.getProduct()
			this.getGoodsInfoImg()

				  
		},
		onNavigationBarButtonTap() {
			this.showShare=true
		},
		
	}
</script>

<style lang="scss" scoped>
	.swiper-img {
		width: 100%;
		height: 445px;
	}

.vant-button2{

	margin-left: 10px;

}


	.goods-info {
		margin: 0.6rem;
		font-size: 1.2rem;
		background-color: #fff;
	}

	.goods-content-inner {
		margin-top: 0.6rem;

		.price {
			font-size: 1.5rem;
			color: #ef4f4f;

			.us {
				font-size: 1rem;
			}

			.price_old {
				font-size: 20px;
				margin-left: 5px;
			}
		}
	}

	.goods-num {
		font-size: 16px;
		margin-right: 5px;
	}

	.goods-img-item {
		display: block;
		width: 100%;
		margin: 0;
	}

	.mint-button--small {
		margin-left: 5px;
	}

	.goodsinfo-container {
		background-color: #fff;
		overflow: hidden;
	}

	.btnarea {
		flex-direction: column;

		button {
			width: 100%;
		}

		button+button {
			margin-top: 15px;
		}
	}

	.ball {
		width: 15px;
		height: 15px;
		background-color: red;
		border-radius: 50%;
		position: absolute;
		z-index: 99;
		// left: 137px;
		left: 252px;
		top: 533px;

		//将来小球需要移动到的位置
		//  transform: translate(87px,250px);
	}
	
	.share-wrap {
		position: fixed;
		bottom: 0;
		border-radius: 15px;
		background: #CCCCCC;
		width: 100%;
		height: 150px;
	}
	image{
		width: 32px;
		height: 32px;
	}
	.share-icon-wrap {
		margin-top: 50px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	
	.v-enter {
		height: 0;
		opacity: 0;
	}
	.v-enter-to {
		opacity: 1;
		height: 150px;
		transition: all 0.5s;
	}
	.v-leave-to{
		height: 0;
		opacity: 0;
		transition: all 0.5s;
	}
	.cancel-btn {
		position: fixed;
		width: 100%;
		bottom: 0;
		background: #dddddd;
		opacity: 1;
	}
	


</style>
